<template>
	<view>
		<view class="card user-top">
			<view class="flex-center" @click="setting">
				<image :src="uploadUrl+user.avatarUrl" class="user-avar"></image>
				<view class="user-left">
					<view style="display: flex;align-items: center;">
						<view class="user-name">{{user.nickname || '匿名'}}</view>
						<image v-show="level>0&&level<6" :src="'/static/vip-icons/'+level+'.png'"
							style="width: 45rpx;display: block;" mode="widthFix">
						</image>
					</view>
					<view class="flex">
						<view class="user-id">ID: {{user.idNumber || '000000'}}</view>
						<image @click.stop="handleCopy(user.idNumber)" class="copy" src="/static/public-images/copy.png"
							mode="widthFix"></image>
					</view>
				</view>
			</view>

			<!-- 货币 -->
			<view class="prop-box" @click="$jump('/pages/my/transNodes')">
				<view class="card prop-item">
					<view class="flex">
						<image class="prop-icon" src="/static/public-images/point.png" mode="widthFix"></image>
						<view class="prop-name">积分</view>
					</view>
					<view class="prop-number">{{user.points || 0}}</view>
				</view>
				<view class="card prop-item">
					<view class="flex">
						<image class="prop-icon" src="/static/hb.png" mode="widthFix"></image>
						<view class="prop-name">能量</view>
					</view>
					<view class="prop-number">{{user.energy || 0}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		copy
	} from '@/utils/common.js'
	import config from '@/config.js'
	import {
		myUser,
		myUserLevel
	} from '@/api/my.js'

	export default {
		props: {
			user: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				uploadUrl: config.uploadUrl,
				level: 0,
				imgShow: true
			};
		},
		methods: {
			imaErr() {
				this.imgShow = false
			},
			setting() {
				uni.navigateTo({
					url: '/pages/my/setting'
				})
			},
			async getMyUser() {
				let res2 = await myUserLevel()
				this.level = res2.data.userLevel
			},
			handleCopy(TYPER) {
				copy(TYPER)
			}

		}
	}
</script>

<style lang="scss">
	.flex-center {
		display: flex;
		align-items: center;
	}

	.user-top {
		width: 100%;
		padding: 20rpx 30rpx;
	}

	.user-left {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.user-avar {
		--tw-border-opacity: 1;
		border-radius: 50%;
		border: #60a5fa solid 4rpx;
		width: 100rpx;
		height: 100rpx;
		background-image: url('/static/myimages/m6.png');
		background-size: cover;
		background-position: center;
	}

	.user-name {
		font-family: 'Noto Sans SC', sans-serif;
		color: #e2e8f0;
		font-size: 40rpx;
		line-height: 56rpx;
		font-weight: 700;
		margin-right: 10rpx;
	}

	.user-id {
		--tw-text-opacity: 1;
		color: rgb(156 163 175 / var(--tw-text-opacity));
		font-size: 28rpx;
		line-height: 1;
	}

	.copy {
		display: block;
		width: 30rpx;
		margin-left: 10rpx;
	}

	.flex {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.prop-name {
		line-height: 1;
		color: #d1d5db;
		font-size: 32rpx;
		font-weight: 400;
		margin-left: 10rpx;
	}

	.prop-number {
		color: #e2e8f0;
		font-size: 48rpx;
		font-weight: bold;
		margin-top: 10rpx;
	}

	.prop-icon {
		width: 45rpx;
		height: 45rpx;
		padding-bottom: 10rpx;
		display: block;
	}

	.prop-box {
		margin-top: 20rpx;
		display: flex;
		gap: 20rpx;
	}

	.prop-item {
		padding: 20rpx;
		flex: 1;
	}
</style>